<template>
    <div>
        <div class="top">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>商品统计图</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
        </div>
        <div id="statisticalchartTab">
            <div class="tab">
                <span class="tab_left_browse">浏览记录</span>
            </div>
            <div class="StatisticalChartData">
                <div class="StatisticalChartData_on">本月浏览总数</div>
                <div class="StatisticalChartData_middle">{{this.month}}</div>
                <div class="StatisticalChartData_below">
                    <span class="StatisticalChartData_below_left"  ref="StatisticalChartData_below_left_arrow">
                        {{this.arrow}}
                        {{this.yearOnyearGrowthRate = (this.month - this.onmonth)/this.onmonth * 100}}%
                    </span>同比上月
                </div>
            </div>
            <div class="WeekStatisticalChartData">
                <div class="StatisticalChartData_on">近七天浏览总数</div>
                <div class="StatisticalChartData_middle">{{this.WeekData}}</div>
                <div class="StatisticalChartData_below">
                    <span class="StatisticalChartData_below_left" ref="WeekChartData">
                        {{this.weekArrow}}
                        {{this.weekOnweekGrowthRate = (this.WeekData - this.onWeek)/this.onWeek * 100}}%
                    </span>同比上周
                </div>
            </div>
            <div class="LocationOfStatisticalChart">
                <div class="Select">
                    <el-link @click="getdate" class="SelectCriteria">今日</el-link>
                    <el-link @click="getdateWeek" class="SelectCriteria1">近七天</el-link>
                    <el-link @click="getdateMonth" class="SelectCriteria1">近一个月</el-link>
                    <el-link @click="getdateThreeMonth" class="SelectCriteria1">近三个月</el-link>
                </div>
                <div class="Statistical_chart">
                    <div id="echartsdemo" ref="container"></div>
                </div>
            </div>
        </div>

        <div id="statisticalchartUnd">
            <div class="tab">
                <span class="tab_left_browse">销售记录</span>
            </div>
            <div class="StatisticalChartData">
                <div class="StatisticalChartData_on">本月销售总数</div>
                <div class="StatisticalChartData_middle">{{this.month2}}</div>
                <div class="StatisticalChartData_below">
                    <span class="StatisticalChartData_below_left"  ref="StatisticalChartData_below_left_arrow2">
                        {{this.arrow2}}
                        {{this.yearOnyearGrowthRate2 = (this.month2 - this.onmonth2)/this.onmonth2 * 100}}%
                    </span>同比上月
                </div>
            </div>
            <div class="WeekStatisticalChartData">
                <div class="StatisticalChartData_on">近七天销售总数</div>
                <div class="StatisticalChartData_middle">{{this.WeekData2}}</div>
                <div class="StatisticalChartData_below">
                    <span class="StatisticalChartData_below_left" ref="WeekChartData2">
                        {{this.weekArrow2}}
                        {{this.weekOnweekGrowthRate2 = (this.WeekData2 - this.onWeek2)/this.onWeek2 * 100}}%
                    </span>同比上周
                </div>
            </div>
            <div class="LocationOfStatisticalChart">
                <div class="Select">
                    <el-link @click="getdateSales" class="SelectCriteria">今日</el-link>
                    <el-link @click="getdateSalesWeek" class="SelectCriteria1">近七天</el-link>
                    <el-link @click="getdateMonth2" class="SelectCriteria1">近一个月</el-link>
                    <el-link @click="getdateSalesThreeMonth" class="SelectCriteria1">近三个月</el-link>
                </div>
                <div class="Statistical_chart">
                    <div id="echartsdemo2" ref="container2"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment"
    import * as ec from 'echarts'
    export default {
        name:"ec",
        props:['product'],
        inject:['reload'],
        data() {
            return {
                // 写在data中或者写在methods里面，一定要写不然会报错

                //操作日志表格数据
                statisticalData: [],//可能会有变动
                statisticalData2:[],//过度数据用的
                statisticalData3:[],//不会变的所有统计数据
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                // 指定图表的配置项和数据
                axiasx: [],
                axiasx2: [  ],
                axiasy: [], // 画图的y轴
                axiasy2: [], // 画图的y轴
                //
                echartsinstance:null,
                echartsinstance2:null,
                options:{
                    // 标题设置
                    title:{
                        text:'浏览数据统计图',
                    },
                    tooltip:{},//提示框
                    legend:{// 数据标识
                        data:["人数"]
                    },
                    // x轴标记
                    xAxis:{
                        type:'category',
                        data:this.axiasx,
                        axisPointer: {
                            handle: {
                                show: true,
                                color: '#7581BD'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    // y轴标记
                    yAxis:{
                        type:'value'
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            throttle: 50
                        }
                    ],
                    // 数据系列
                    series:[
                        {
                            type:'line',
                            smooth:true,
                            lineStyle: {
                                color:'#59A8ED'
                            },
                            data:this.axiasy,
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new ec.graphic.LinearGradient(0, 1, 1, 1, [
                                    {
                                        offset: 0,
                                        color: '#DDEEFC'
                                    },
                                    {
                                        offset: 1,
                                        color: '#DDEEFC'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            }
                        }
                    ]
                },
                options2:{
                    // 标题设置
                    title:{
                        text:'浏览数据统计图',
                    },
                    tooltip:{},//提示框
                    legend:{// 数据标识
                        data:["人数"]
                    },
                    // x轴标记
                    xAxis:{
                        type:'category',
                        data:this.axiasx2,
                        axisPointer: {
                            handle: {
                                show: true,
                                color: '#7581BD'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    // y轴标记
                    yAxis:{
                        type:'value'
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            throttle: 50
                        }
                    ],
                    // 数据系列
                    series:[
                        {
                            type:'line',
                            smooth:true,
                            lineStyle: {
                                // width: 0
                                color:'#59A8ED'
                            },
                            data:this.axiasy2,
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new ec.graphic.LinearGradient(0, 1, 1, 1, [
                                    {
                                        offset: 0,
                                        color: '#DDEEFC'
                                    },
                                    {
                                        offset: 1,
                                        color: '#DDEEFC'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            }
                        }
                    ]
                },
                //X轴名称
                proName:[],
                proName2:[],
                //数据
                proValue:[],
                proValue2:[],
                //本月浏览总数
                month:0,
                month2:0,
                //上月浏览总数
                onmonth:0,
                onmonth2:0,
                //同比增长率
                yearOnyearGrowthRate:0,
                yearOnyearGrowthRate2:0,
                //这周数据
                WeekData:0,
                WeekData2:0,
                //上周数据
                onWeek:0,
                onWeek2:0,
                weekOnweekGrowthRate:0,
                weekOnweekGrowthRate2:0,
                //箭头
                arrow:"↑",
                arrow2:"↑",
                weekArrow:"↑",
                weekArrow2:"↑"
            }
        },

        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            //获取当天浏览数量
            getdate() {
                this.$http.get("/ProductViews/getProductViews",{
                    params:{
                        browseTime:new Date().Format('yyyy-MM-dd'),
                        condition:'browse_products'
                    }
                }).then(res => {
                    this.proName = [];
                    this.proValue = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName.push(res.data[i].productName)
                        this.proValue.push(res.data[i].quantity)
                    }
                    this.axiasx = this.proName;
                    this.axiasy = this.proValue;
                    this.options.series[0].data = this.axiasy;
                    this.options.xAxis.data= this.axiasx;
                    this.options.title.text = "今天";
                    this.echartsinstance.setOption(this.options)
                });
            },
            //获取当天销售数量
            getdateSales() {
                this.$http.get("/ProductSalesVolume/getProductSalesVolume",{
                    params:{
                        salesTime:new Date().Format('yyyy-MM-dd'),
                        condition:'selling_goods'
                    }
                }).then(res => {
                    this.proName2 = [];
                    this.proValue2 = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName2.push(res.data[i].productName)
                        this.proValue2.push(res.data[i].quantity)
                    }
                    this.axiasx2 = this.proName2;
                    this.axiasy2 = this.proValue2;
                    this.options2.series[0].data = this.axiasy2;
                    this.options2.xAxis.data= this.axiasx2;
                    this.options2.title.text = "今天";
                    this.echartsinstance2.setOption(this.options2)
                });
            },
            //获取近七天浏览数量
            getdateWeek() {
                this.$http.get("/ProductSalesVolume/getProductViewsWeekandMod",{
                    params:{
                        condition:'browse_time',
                        AWeekOrAMonth:'1 WEEK',
                    }
                }).then(res => {
                    this.proName = [];
                    this.proValue = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName.push(res.data[i].browseTime)
                        this.proValue.push(res.data[i].quantity)
                    }
                    this.axiasx = this.proName;
                    this.axiasy = this.proValue;
                    this.options.series[0].data = this.axiasy;
                    this.options.xAxis.data= this.axiasx;
                    this.options.title.text = "近七天";
                    this.echartsinstance.setOption(this.options)
                });
            },
            //获取近七天销售数量
            getdateSalesWeek() {
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeWeekandMod",{
                    params:{
                        condition:'sales_time',
                        AWeekOrAMonth:'1 WEEK',
                    }
                }).then(res => {
                    this.proName2 = [];
                    this.proValue2 = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName2.push(res.data[i].salesTime)
                        this.proValue2.push(res.data[i].quantity)
                    }
                    this.axiasx2 = this.proName2;
                    this.axiasy2 = this.proValue2;
                    this.options2.series[0].data = this.axiasy2;
                    this.options2.xAxis.data= this.axiasx2;
                    this.options2.title.text = "近七天";
                    this.echartsinstance2.setOption(this.options2)
                });
            },
            //获取近本月浏览数量
            getdateMonth() {
                this.month =0;
                this.$http.get("/ProductViews/getProductViewsWeekandMod",{
                    params:{
                        condition:'browse_time',
                        AWeekOrAMonth:'1 MONTH',
                    }
                }).then(res => {
                    this.proName = [];
                    this.proValue = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName.push(res.data[i].browseTime)
                        this.proValue.push(res.data[i].quantity)
                        this.month += res.data[i].quantity
                    }
                    this.axiasx = this.proName;
                    this.axiasy = this.proValue;
                    this.options.series[0].data = this.axiasy;
                    this.options.xAxis.data= this.axiasx;
                    this.options.title.text = "本月";
                    this.echartsinstance.setOption(this.options)
                });
            },
            //获取近一月销售数量
            getdateMonth2() {
                this.month2 =0;
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeWeekandMod",{
                    params:{
                        condition:'sales_time',
                        AWeekOrAMonth:'1 MONTH',
                    }
                }).then(res => {
                    this.proName2 = [];
                    this.proValue2 = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName2.push(res.data[i].salesTime)
                        this.proValue2.push(res.data[i].quantity)
                        this.month2 += res.data[i].quantity
                    }
                    this.axiasx2 = this.proName2;
                    this.axiasy2 = this.proValue2;
                    this.options2.series[0].data = this.axiasy2;
                    this.options2.xAxis.data= this.axiasx2;
                    this.options2.title.text = "本月";
                    this.echartsinstance2.setOption(this.options2)
                });
            },
            //获取近三月浏览数量
            getdateThreeMonth() {
                //
                this.$http.get("/ProductViews/getProductViewsWeekandMod",{
                    params:{
                        condition:'browse_time',
                        AWeekOrAMonth:'3 MONTH',
                    }
                }).then(res => {
                    this.proName = [];
                    this.proValue = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName.push(res.data[i].browseTime)
                        this.proValue.push(res.data[i].quantity)
                    }
                    this.axiasx = this.proName;
                    this.axiasy = this.proValue;
                    this.options.series[0].data = this.axiasy;
                    this.options.xAxis.data= this.axiasx;
                    this.options.title.text = "近三个月";
                    this.echartsinstance.setOption(this.options)
                });
            },
            //获取近三月销售数量
            getdateSalesThreeMonth() {
                //
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeWeekandMod",{
                    params:{
                        condition:'sales_time',
                        AWeekOrAMonth:'3 MONTH',
                    }
                }).then(res => {
                    this.proName2 = [];
                    this.proValue2 = [];
                    for (let i = 0 ;i<res.data.length;i++){
                        this.proName2.push(res.data[i].salesTime)
                        this.proValue2.push(res.data[i].quantity)
                    }
                    this.axiasx2 = this.proName2;
                    this.axiasy2 = this.proValue2;
                    this.options2.series[0].data = this.axiasy2;
                    this.options2.xAxis.data= this.axiasx2;
                    this.options2.title.text = "近三个月";
                    this.echartsinstance2.setOption(this.options2)
                });
            },
            //获取近上个月浏览数量
            getdateOnMonth() {
                this.$http.get("/ProductViews/getProductViewsOnMod",{
                }).then(res => {
                    this.onmonth = res.data[0].quantity;
                });
            },
            //获取近上个月销售数量
            getdateSalesOnMonth() {
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeOnMod",{
                }).then(res => {
                    this.onmonth2 = res.data[0].quantity;
                });
            },
            //浏览量同比率正负样式切换
            gatArrowStyle(){
                if (this.yearOnyearGrowthRate < 0){
                    this.$refs.StatisticalChartData_below_left_arrow.style.color="red";
                    this.arrow = "↓"
                }else {
                    this.$refs.StatisticalChartData_below_left_arrow.style.color="#1BAA53";
                    this.arrow = "↑"
                }
            },
            gatWeekStyle(){
                if (this.weekOnweekGrowthRate < 0){
                    this.$refs.WeekChartData.style.color="red";
                    this.weekArrow = "↓"
                }else{
                    this.$refs.WeekChartData.style.color="#1BAA53";
                    this.weekArrow = "↑"
                }
            },
            //销售量同比率正负样式切换
            gatSalesArrowStyle(){
                if (this.yearOnyearGrowthRate2 < 0){
                    this.$refs.StatisticalChartData_below_left_arrow2.style.color="red";
                    this.arrow2 = "↓"
                }else {
                    this.$refs.StatisticalChartData_below_left_arrow2.style.color="#1BAA53";
                    this.arrow2 = "↑"
                }
            },
            gatSalesWeekStyle(){
                if (this.weekOnweekGrowthRate2 < 0){
                    this.$refs.WeekChartData2.style.color="red";
                    this.weekArrow2 = "↓"
                }else{
                    this.$refs.WeekChartData2.style.color="#1BAA53";
                    this.weekArrow2 = "↑"
                }
            },
            //获取近上周浏览数量
            getdateOnWeek() {
                this.$http.get("/ProductViews/getProductViewsOnWeek",{
                }).then(res => {
                    this.onWeek = res.data[0].quantity;
                });
            },
            //获取近上周销售数量
            getdateSalesOnWeek() {
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeOnWeek",{
                }).then(res => {
                    this.onWeek2 = res.data[0].quantity;
                });
            },
            //一进来获取近七天浏览数量
            getWeek() {
                this.WeekData =0;
                this.$http.get("/ProductViews/getProductViewsWeekandMod",{
                    params:{
                        condition:'browse_time',
                        AWeekOrAMonth:'1 WEEK',
                    }
                }).then(res => {
                    for (let i = 0 ;i<res.data.length;i++){
                       this.WeekData += res.data[i].quantity;
                    }
                });
            },
            //一进来获取近七天销售数量
            getSalesWeek() {
                this.WeekData2 =0;
                this.$http.get("/ProductSalesVolume/getProductSalesVolumeWeekandMod",{
                    params:{
                        condition:'sales_time',
                        AWeekOrAMonth:'1 WEEK',
                    }
                }).then(res => {
                    for (let i = 0 ;i<res.data.length;i++){
                        this.WeekData2 += res.data[i].quantity;
                    }
                });
            },
        },
        //先调用一下传入数据的方法
        created(){
            this.getdateMonth();
            this.getdateMonth2();
            this.getdateOnMonth();
            this.getdateSalesOnMonth();
            this.getdateOnWeek();
            this.getdateSalesOnWeek();
            this.getWeek();
            this.getSalesWeek();
        },
        beforeUpdate(){

        },
        updated(){
            this.gatWeekStyle()
            this.gatSalesWeekStyle()
        },
        mounted(){
            this.echartsinstance = ec.init(this.$refs.container);
            this.echartsinstance2 = ec.init(this.$refs.container2);
            this.echartsinstance.setOption(this.options)
            this.echartsinstance2.setOption(this.options2)
            this.gatArrowStyle();
            this.gatSalesArrowStyle();
        },
        beforeDestroy() {
            if (!this.echartsinstance) {
                return
            }
            this.echartsinstance.dispose();
            this.echartsinstance = null;
            if (!this.echartsinstance2) {
                return
            }
            this.echartsinstance2.dispose()
            this.echartsinstance2 = null
        },
        watch:{
            options(){
                this.echartsinstance.clear()
                this.options.series[0].data = this.axiasy2
                this.options.xAxis[0].data = this.axiasx2
                this.echartsinstance.setOption(this.options)
            },
            options2(){
                this.echartsinstance2.clear()
                this.options2.series[0].data = this.axiasy2
                this.options2.xAxis[0].data = this.axiasx2
                this.echartsinstance2.setOption(this.options2)
            }
        }
    };



</script>
<style>
    #echartsdemo{
        width:1000px;
        height: 300px;
    }
    #echartsdemo2{
        width:1000px;
        height: 300px;
    }
    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_left_browse{
        margin: 0px 0px 0px 9px;
        font-size: 15px;
        color: #666666;
        font-weight: 600;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
/*    统计图上方的条件选择*/
    .Select{
        position: absolute;
        z-index: 10;
    }
    .SelectCriteria{
        margin: 0px 0px 0px 650px;
    }
    .SelectCriteria1{
        margin: 0px 0px 0px 20px;
    }
/*    统计图*/
    .Statistical_chart{
        margin: 0px 0px 0px 0px;
    }
    .LocationOfStatisticalChart{
        margin: 0px 0px 0px 413px;
    }
    .StatisticalChartData{
        margin: 54px 0px 0px 106px;
        position: absolute;
        z-index: 10;
    }
    .WeekStatisticalChartData{
        margin: 160px 0px 0px 106px;
        position: absolute;
        z-index: 10;
    }
    .StatisticalChartData_on{
        color: #989898;
        font-size: 13px;
    }
    .StatisticalChartData_middle{
        margin: 0px 0px 0px -107px;
        width: 292px;
        color: #666666;
        font-size: 28px;
        text-align: center;
    }
    .StatisticalChartData_below{
        margin: 2px 0px 0px 0px;
        color: #CCCCD6;
        font-size: 13px;
    }
    .StatisticalChartData_below_left{
        margin: 0px 5px 0px 0px;
        color: #1BAA53;
    }
/*    表格*/
    #statisticalchartTab{
        margin: 0px 0px 0px 0px;
        background: white;
    }
    #statisticalchartUnd{
        margin: 50px 0px 0px 0px;
        background: white;
    }

</style>